<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 定义文档类型
type DocItem = {
  title: string;
  content: string;
}

type DocCategory = {
  id: string;
  name: string;
  icon: string;
}

type DocsType = {
  [key: string]: DocItem[];
}

// 文档分类
const categories: DocCategory[] = [
  {
    id: 'getting-started',
    name: '快速开始',
    icon: '🚀'
  },
  {
    id: 'features',
    name: '功能特性',
    icon: '✨'
  },
  {
    id: 'api',
    name: 'API 文档',
    icon: '📚'
  },
  {
    id: 'integration',
    name: '集成指南',
    icon: '🔌'
  }
]

// 当前选中的分类
const currentCategory = ref<string>('getting-started')

// 文档内容
const docs: DocsType = {
  'getting-started': [
    {
      title: '安装指南',
      content: `
        <h3>环境要求</h3>
        <ul>
          <li>Node.js 16.0 或更高版本</li>
          <li>npm 7.0 或更高版本</li>
          <li>现代浏览器（Chrome、Firefox、Safari、Edge）</li>
        </ul>

        <h3>安装步骤</h3>
        <ol>
          <li>克隆代码仓库</li>
          <li>安装依赖</li>
          <li>配置环境变量</li>
          <li>启动服务</li>
        </ol>

        <h3>快速开始</h3>
        <pre><code>npm install
npm run dev</code></pre>
      `
    },
    {
      title: '基本配置',
      content: `
        <h3>配置文件</h3>
        <p>在项目根目录创建 .env 文件：</p>
        <pre><code>API_KEY=your_api_key
API_URL=https://api.example.com</code></pre>

        <h3>配置说明</h3>
        <ul>
          <li>API_KEY：您的 API 密钥</li>
          <li>API_URL：API 服务器地址</li>
        </ul>
      `
    }
  ],
  'features': [
    {
      title: '智能对话',
      content: `
        <h3>功能介绍</h3>
        <p>支持自然语言对话，理解上下文，提供智能回复。</p>

        <h3>使用示例</h3>
        <pre><code>const response = await ai.chat({
  message: "你好，请介绍一下自己",
  context: previousMessages
});</code></pre>
      `
    },
    {
      title: '知识库集成',
      content: `
        <h3>功能介绍</h3>
        <p>支持接入企业知识库，提供精准的知识检索和问答服务。</p>

        <h3>配置方法</h3>
        <pre><code>const knowledge = await ai.knowledge.create({
  name: "企业知识库",
  type: "document"
});</code></pre>
      `
    }
  ],
  'api': [
    {
      title: 'API 概览',
      content: `
        <h3>基础信息</h3>
        <ul>
          <li>基础URL：https://api.example.com/v1</li>
          <li>认证方式：API Key</li>
          <li>数据格式：JSON</li>
        </ul>

        <h3>请求示例</h3>
        <pre><code>curl -X POST https://api.example.com/v1/chat \\
  -H "Authorization: Bearer YOUR_API_KEY" \\
  -H "Content-Type: application/json" \\
  -d '{"message": "你好"}'</code></pre>
      `
    },
    {
      title: 'API 端点',
      content: `
        <h3>对话接口</h3>
        <pre><code>POST /v1/chat
GET /v1/history
DELETE /v1/history/:id</code></pre>

        <h3>知识库接口</h3>
        <pre><code>POST /v1/knowledge
GET /v1/knowledge/:id
PUT /v1/knowledge/:id</code></pre>
      `
    }
  ],
  'integration': [
    {
      title: 'Web 集成',
      content: `
        <h3>安装 SDK</h3>
        <pre><code>npm install @ai-assistant/sdk</code></pre>

        <h3>初始化</h3>
        <pre><code>import { AIAssistant } from '@ai-assistant/sdk';

const ai = new AIAssistant({
  apiKey: 'YOUR_API_KEY'
});</code></pre>
      `
    },
    {
      title: '移动端集成',
      content: `
        <h3>Android 集成</h3>
        <pre><code>implementation 'com.ai-assistant:sdk:1.0.0'</code></pre>

        <h3>iOS 集成</h3>
        <pre><code>pod 'AIAssistant'</code></pre>
      `
    }
  ]
}

// 当前选中的文档
const currentDoc = ref<DocItem>(docs[currentCategory.value][0])

// 切换分类
const switchCategory = (categoryId: string) => {
  currentCategory.value = categoryId
  currentDoc.value = docs[categoryId][0]
}

// 切换文档
const switchDoc = (doc: DocItem) => {
  currentDoc.value = doc
}

// 添加复制功能
const copyCode = async (code: string) => {
  try {
    await navigator.clipboard.writeText(code)
    showCopySuccess()
  } catch (err) {
    console.error('复制失败:', err)
  }
}

const showCopySuccess = () => {
  const toast = document.createElement('div')
  toast.className = 'copy-toast'
  toast.textContent = '复制成功！'
  document.body.appendChild(toast)
  
  setTimeout(() => {
    toast.classList.add('show')
  }, 100)
  
  setTimeout(() => {
    toast.classList.remove('show')
    setTimeout(() => {
      document.body.removeChild(toast)
    }, 300)
  }, 2000)
}

// 修改文档内容中的代码块渲染
const renderCodeBlock = (content: string) => {
  return content.replace(/<pre><code>([\s\S]*?)<\/code><\/pre>/g, (match, code) => {
    return `
      <div class="code-block">
        <div class="code-header">
          <span class="code-title">代码示例</span>
          <button class="copy-btn" onclick="document.dispatchEvent(new CustomEvent('copyCode', { detail: ${JSON.stringify(code)} }))">
            <span class="copy-icon">📋</span>
            复制代码
          </button>
        </div>
        <pre><code>${code}</code></pre>
      </div>
    `
  })
}

// 监听复制事件
onMounted(() => {
  document.addEventListener('copyCode', ((e: CustomEvent) => {
    copyCode(e.detail)
  }) as EventListener)
})

onUnmounted(() => {
  document.removeEventListener('copyCode', ((e: CustomEvent) => {
    copyCode(e.detail)
  }) as EventListener)
})
</script>

<template>
  <div class="docs">
    <!-- 文档头部 -->
    <section class="docs-header">
      <div class="container">
        <h1>产品文档</h1>
        <p>了解如何使用我们的产品，获取技术支持</p>
      </div>
    </section>

    <div class="container">
      <div class="docs-content">
        <!-- 侧边栏 -->
        <aside class="docs-sidebar">
          <nav class="category-nav">
            <div
              v-for="category in categories"
              :key="category.id"
              :class="['category-item', { active: currentCategory === category.id }]"
              @click="switchCategory(category.id)"
            >
              <span class="category-icon">{{ category.icon }}</span>
              {{ category.name }}
            </div>
          </nav>

          <div class="doc-nav">
            <div
              v-for="doc in docs[currentCategory]"
              :key="doc.title"
              :class="['doc-item', { active: currentDoc === doc }]"
              @click="switchDoc(doc)"
            >
              {{ doc.title }}
            </div>
          </div>
        </aside>

        <!-- 文档内容 -->
        <main class="docs-main">
          <article class="doc-content">
            <h2>{{ currentDoc.title }}</h2>
            <div v-html="renderCodeBlock(currentDoc.content)"></div>
          </article>
        </main>
      </div>
    </div>
  </div>
</template>

<style scoped>
.docs {
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 文档头部样式 */
.docs-header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
  padding: 6rem 0;
  text-align: center;
}

.docs-header h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.docs-header p {
  font-size: 1.25rem;
  opacity: 0.9;
}

/* 文档内容样式 */
.docs-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  padding: 2rem 0;
}

/* 侧边栏样式 */
.docs-sidebar {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.category-nav {
  margin-bottom: 2rem;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-item:hover {
  background: #f8f9fa;
}

.category-item.active {
  background: #007bff;
  color: white;
}

.category-icon {
  margin-right: 0.75rem;
  font-size: 1.25rem;
}

.doc-nav {
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.doc-item {
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.doc-item:hover {
  background: #f8f9fa;
}

.doc-item.active {
  background: #e9ecef;
  color: #007bff;
  font-weight: 500;
}

/* 文档主体样式优化 */
.docs-main {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
}

.doc-content {
  max-width: 800px;
  margin: 0 auto;
}

.doc-content h2 {
  font-size: 2.2rem;
  color: #1a1a1a;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid #f0f0f0;
  font-weight: 600;
}

.doc-content h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin: 2.5rem 0 1.2rem;
  font-weight: 600;
}

.doc-content p {
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}

.doc-content ul,
.doc-content ol {
  color: #4a5568;
  line-height: 1.8;
  margin: 1.5rem 0;
  padding-left: 1.8rem;
}

.doc-content li {
  margin-bottom: 0.8rem;
  position: relative;
}

.doc-content ul li::before {
  content: '•';
  color: #3a7afe;
  font-weight: bold;
  position: absolute;
  left: -1.2rem;
}

.doc-content ol {
  counter-reset: item;
}

.doc-content ol li {
  counter-increment: item;
}

.doc-content ol li::before {
  content: counter(item) '.';
  color: #3a7afe;
  font-weight: bold;
  position: absolute;
  left: -1.8rem;
}

.doc-content pre {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid #e2e8f0;
  position: relative;
}

.doc-content pre::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3a7afe, #60a5fa);
  border-radius: 8px 8px 0 0;
}

.doc-content code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.95rem;
  color: #2d3748;
  background: #f1f5f9;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0 0.2rem;
}

.doc-content pre code {
  background: none;
  padding: 0;
  margin: 0;
  color: #2d3748;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* 添加代码块语法高亮 */
.doc-content pre code .hljs-keyword {
  color: #7c3aed;
}

.doc-content pre code .hljs-string {
  color: #059669;
}

.doc-content pre code .hljs-number {
  color: #d97706;
}

.doc-content pre code .hljs-comment {
  color: #6b7280;
  font-style: italic;
}

/* 添加响应式设计 */
@media (max-width: 768px) {
  .docs-main {
    padding: 1.5rem;
  }

  .doc-content h2 {
    font-size: 1.8rem;
  }

  .doc-content h3 {
    font-size: 1.3rem;
  }

  .doc-content p {
    font-size: 1rem;
  }

  .doc-content pre {
    padding: 1rem;
  }
}

/* 代码块样式优化 */
.code-block {
  position: relative;
  margin: 1.5rem 0;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}

.code-title {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.copy-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  background: #3a7afe;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.copy-btn:hover {
  background: #2563eb;
  transform: translateY(-1px);
}

.copy-icon {
  font-size: 1rem;
}

/* 复制成功提示 */
.copy-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1000;
}

.copy-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* 代码块内容样式 */
.code-block pre {
  margin: 0;
  padding: 1.5rem;
  border: none;
  border-radius: 0;
  background: transparent;
}

.code-block pre::before {
  display: none;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .code-header {
    padding: 0.5rem 0.75rem;
  }
  
  .copy-btn {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
  }
  
  .code-block pre {
    padding: 1rem;
  }
}
</style> 